<template>
  <div class="setup_vue">
    <el-form ref="recordForm" class="recordForm" label-width="80px" :model="userinfo" :rules="userformRules" @submit.native.prevent>
      <el-form-item label="账　号" prop="ZK_ID">
        <el-input v-model="userinfo.ZK_ID" disabled></el-input>
      </el-form-item>
      <el-form-item label="用户名" prop="ZK_NAME">
        <el-input v-model="userinfo.ZK_NAME"></el-input>
      </el-form-item>
      <el-form-item label="密　码">
        <el-input type="password" v-model="userinfo.ZK_PASSWORD" placeholder="密码为空时默认不修改" autocomplete='new-password'></el-input>
      </el-form-item>
      <el-row>
        <el-col :span="12">
          <el-form-item label="性　别">
            <el-radio-group v-model="userinfo.ZK_SEX">
              <el-radio label="男"></el-radio>
              <el-radio label="女"></el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="角　色">
            <el-select v-model="userinfo.ZK_ROLE" style="width:100%;">
              <el-option v-for="item in roles" :label="item.key" :key="item.key" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="单　位" prop="ZK_DEPARTMENT">
        <el-input v-model="userinfo.ZK_DEPARTMENT" placeholder="请输入所属单位"></el-input>
      </el-form-item>
      <el-form-item label="电子邮箱" prop="ZK_EMAIL">
        <el-input v-model="userinfo.ZK_EMAIL" placeholder="请输入电子邮箱 以方便联系"></el-input>
      </el-form-item>
      <el-form-item label="电话号码" prop="ZK_PHONE">
        <el-input v-model="userinfo.ZK_PHONE" placeholder="请输入电话号码 以方便联系"></el-input>
      </el-form-item>
      <el-form-item label="备　注">
        <el-input type="textarea" v-model="userinfo.ZK_REMARK"></el-input>
      </el-form-item>
    </el-form>
    <div style="text-align:center;">
      <el-button type="primary" @click="updateUserInfo()">修改信息</el-button>
    </div>
  </div>
</template>

<script>
import md5 from 'js-md5';
import { setTimeout } from 'timers';

export default {
  data() {
    const validateEmail = (rule, value, callback) => {
      setTimeout(() => {
        if (!this.$common.ValidateEmail(value)) {
          callback(new Error('请输入有效的电子邮箱'));
        } else {
          callback();
        }
      }, 100);
    };
    const validatePhone = (rule, value, callback) => {
      setTimeout(() => {
        if (!this.$common.ValidatePhone(value)) {
          callback(new Error('请输入有效的电话号码'));
        } else {
          callback();
        }
      }, 100);
    };
    return {
      roles: [],
      userinfo: {},
      userformRules: {
        ZK_ID: [
          { required: true, message: '请输入账号', trigger: 'blur' },
          {
            min: 3,
            max: 32,
            message: '长度在 3 到 32 个字符',
            trigger: 'blur',
          },
        ],
        ZK_NAME: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          {
            min: 3,
            max: 32,
            message: '长度在 3 到 32 个字符',
            trigger: 'blur',
          },
        ],
        ZK_DEPARTMENT: [
          { required: true, message: '请输入所属单位', trigger: 'blur' },
        ],
        ZK_EMAIL: [{ validator: validateEmail, trigger: 'blur' }],
        ZK_PHONE: [{ validator: validatePhone, trigger: 'blur' }],
      },
      uploadAction: '#',
    };
  },
  mounted() {
    this.bindRole();
    this.init();
  },
  methods: {
    init() {
      const user = JSON.parse(JSON.stringify(this.$store.state.userinfo));
      user.ZK_PASSWORD = '';
      this.userinfo = user;
    },
    bindRole() {
      this.$http.get('/api/home/rolelist').then(res => {
        if (res.data.flag === 'True') {
          this.roles = [];
          res.data.result.forEach(item => {
            this.roles.push({ value: item.ZK_ID, key: item.ZK_ROLE });
          });
        }
      });
    },
    updateUserInfo() {
      this.$refs.recordForm.validate(valid => {
        if (valid) {
          if (this.userinfo.ZK_PASSWORD) {
            this.userinfo.ZK_PASSWORD_MD5 = md5(this.userinfo.ZK_PASSWORD);
          }
          this.$http
            .post('/api/home/usersetup', this.userinfo, {
              emulateJSON: true,
            })
            .then(res => {
              if (res.data.flag === 'True') {
                this.$notify({
                  title: '成功',
                  message: `更新信息：${this.userinfo.ZK_NAME}`,
                  type: 'success',
                });
                setTimeout(() => {
                  window.location.reload();
                }, 500);
              }
            });
        } else {
          this.$message.warning('请验证数据有效性');
        }
      });
    },
  },
  watch: {
    /* eslint-disable object-shorthand  */
    '$store.state.userinfo'() {
      this.init();
    },
  },
};
</script>

<style lang="less" scoped>
.setup_vue {
  width: 50%;
  margin: 0 auto;
}
</style>
